<template>
  <el-alert v-if="isError" type="error">{{ t('common.fillTips') }}</el-alert>
  <el-descriptions :column="3" border label-width="150">
    <el-descriptions-item
      :label-class-name="!model.studentPhoto ? 'label-required' : ''"
      :label="t('imrStudent.fields.studentPhoto')"
      width="280"
      :rowspan="3"
    >
      <EditImage v-model="model.studentPhoto" />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.studentCode ? 'label-required' : ''"
      :label="t('imrStudent.fields.studentCode')"
      width="280"
      :span="2"
    >
      <EditInput
        v-model="model.studentCode"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.studentCode')"
        :disabled="componentsMode === 'view'"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.studentName ? 'label-required' : ''"
      :label="t('imrStudent.fields.studentName')"
      width="280"
    >
      <EditInput
        v-model="model.studentName"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.studentName')"
        :disabled="componentsMode === 'view'"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.grade ? 'label-required' : ''"
      :label="t('imrStudent.fields.grade')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_GRADE"
        v-model="model.grade"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.grade')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.classroom ? 'label-required' : ''"
      :label="t('imrStudent.fields.classroom')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_CLASSROOM"
        v-model="model.classroom"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.classroom')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.studentType ? 'label-required' : ''"
      :label="t('imrStudent.fields.studentType')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_STUDENT_TYPE"
        v-model="model.studentType"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.studentType')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.inschoolFlag ? 'label-required' : ''"
      :label="t('imrStudent.fields.inschoolFlag')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_INSCHOOL_FLAG"
        v-model="model.inschoolFlag"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.inschoolFlag')"
        @change="handleInschoolFlagChange"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.studentStatus ? 'label-required' : ''"
      :label="t('imrStudent.fields.studentStatus')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_STUDENT_STATUS"
        v-model="model.studentStatus"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.studentStatus')"
        :disable-function="disableFunc"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.leaveDate')" width="280">
      <EditDate
        v-model="model.leaveDate"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.leaveDate')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.identityNumber ? 'label-required' : ''"
      :label="t('imrStudent.fields.identityNumber')"
      width="280"
    >
      <EditInput
        v-model="model.identityNumber"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.identityNumber')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.trainingLevel ? 'label-required' : ''"
      :label="t('imrStudent.fields.trainingLevel')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_TRAINING_LEVEL"
        v-model="model.trainingLevel"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.trainingLevel')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.primaryMentorCode')" width="280">
      <EditInput
        v-model="model.primaryMentorCode"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.primaryMentor')" width="280">
      <TeacherSelect
        v-model="model.primaryMentorId"
        @selected="handleMentorSelected"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.researchDept')" width="280">
      <EditInput
        v-model="model.researchDept"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.primaryMentor')"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.originalCollege ? 'label-required' : ''"
      :label="t('imrStudent.fields.originalCollege')"
      width="280"
    >
      <EditInput
        v-model="model.originalCollege"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.originalCollege')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.gender ? 'label-required' : ''"
      :label="t('imrStudent.fields.gender')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_GENDER"
        v-model="model.gender"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.gender')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.birthdate ? 'label-required' : ''"
      :label="t('imrStudent.fields.birthdate')"
      width="280"
    >
      <EditDate
        v-model="model.birthdate"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.birthdate')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.ethnic ? 'label-required' : ''"
      :label="t('imrStudent.fields.ethnic')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_ETHNIC"
        v-model="model.ethnic"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.ethnic')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.politicalStatus ? 'label-required' : ''"
      :label="t('imrStudent.fields.politicalStatus')"
      width="280"
    >
      <EditDict
        :dict-type="DICT_TYPE.IMR_INFO_POLITICAL_STATUS"
        v-model="model.politicalStatus"
        :placeholder="t('common.selectTextPlaceholder') + t('imrStudent.fields.politicalStatus')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.homeAddress ? 'label-required' : ''"
      :label="t('imrStudent.fields.homeAddress')"
      width="280"
    >
      <EditInput
        v-model="model.homeAddress"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.homeAddress')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.homeTelephone ? 'label-required' : ''"
      :label="t('imrStudent.fields.homeTelephone')"
      width="280"
    >
      <EditInput
        v-model="model.homeTelephone"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.homeTelephone')"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.personalPhone1 ? 'label-required' : ''"
      :label="t('imrStudent.fields.personalPhone1')"
      width="280"
    >
      <EditInput
        v-model="model.personalPhone1"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.personalPhone1')"
        :disabled="componentsMode === 'view'"
      />
    </el-descriptions-item>
    <el-descriptions-item
      :label-class-name="!model.personalEmail1 ? 'label-required' : ''"
      :label="t('imrStudent.fields.personalEmail1')"
      width="280"
    >
      <EditInput
        v-model="model.personalEmail1"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.personalEmail1')"
      />
    </el-descriptions-item>
    <el-descriptions-item :label="t('imrStudent.fields.arpNumber')" width="280">
      <EditInput
        v-model="model.arpNumber"
        :placeholder="t('common.inputTextPlaceholder') + t('imrStudent.fields.arpNumber')"
      />
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import EditInput from '@/components/EditViewInput/EditInput.vue'
import EditDict from '@/components/EditViewInput/EditDict.vue'
import EditDate from '@/components/EditViewInput/EditDate.vue'
import EditImage from '@/components/EditViewInput/EditImage.vue'
import { ImrStudentVO } from '@/api/core/imrstudent'
import { DICT_TYPE, StringDictDataType } from '@/utils/dict'
import TeacherSelect from '@/components/TeacherSelect/index.vue'
import { UserPageRespVO } from '@/api/system/user'
import ImrStudentInfoDiffView from './ImrStudentInfoDiffView.vue'

const props = defineProps({
  componentsMode: {
    type: String,
    default: 'view'
  },
  edit: {
    type: Boolean,
    default: false
  }
})

const { t } = useI18n()

const model = defineModel<ImrStudentVO>({ required: true })

// 创建一个响应式的 ref
const editMode = ref(props.edit)

// 监听 props.edit 的变化
watch(
  () => props.edit,
  (newValue) => {
    // 确保 newValue 是 boolean 类型
    if (typeof newValue === 'boolean') {
      editMode.value = newValue
    }
  }
)

// 提供响应式值
provide('editMode', editMode)

const isError = computed(() => {
  return (
    // 学生照片
    !model.value.studentPhoto ||
    // 学号
    !model.value.studentCode ||
    // 姓名
    !model.value.studentName ||
    // 年级
    !model.value.grade ||
    // 班级
    !model.value.classroom ||
    // 学生类别
    !model.value.studentType ||
    // 在校标识
    !model.value.inschoolFlag ||
    // 状态
    !model.value.studentStatus ||
    // 证件号码
    !model.value.identityNumber ||
    // 培养层次
    !model.value.trainingLevel ||
    // 学籍所在高校
    !model.value.originalCollege ||
    // 性别
    !model.value.gender ||
    // 出生日期
    !model.value.birthdate ||
    // 民族
    !model.value.ethnic ||
    // 政治面貌
    !model.value.politicalStatus ||
    // 家庭地址
    !model.value.homeAddress ||
    // 家庭联系电话
    !model.value.homeTelephone ||
    // 个人移动电话1
    !model.value.personalPhone1 ||
    // 电子邮件1
    !model.value.personalEmail1
  )
})

const handleMentorSelected = (user: UserPageRespVO) => {
  model.value.primaryMentorId = user.id
  model.value.primaryMentorCode = user.jobCode
  model.value.primaryMentor = user.nickname
  model.value.researchDeptId = user.deptId
  model.value.researchDept = user.deptName
}

const disableFunc = (option: StringDictDataType) => {
  if (!model.value.inschoolFlag) {
    return true
  }
  if (model.value.inschoolFlag === '在校') {
    return !['正常'].includes(option.value)
  }
  if (model.value.inschoolFlag === '离校') {
    return !['毕业', '结束联合培养', '未报到', '放弃联合培养资格', '死亡', '退学', '结业'].includes(
      option.value
    )
  }
  if (model.value.inschoolFlag === '待报到') {
    return !['保留联合培养资格'].includes(option.value)
  }
  return false
}

const handleInschoolFlagChange = (val) => {
  if (val === '在校') {
    model.value.studentStatus = '正常'
    model.value.leaveDate = undefined
  } else if (val === '离校') {
    model.value.studentStatus = undefined
    model.value.leaveDate = new Date().getTime()
  } else if (val === '待报到') {
    model.value.studentStatus = '保留联合培养资格'
    model.value.leaveDate = undefined
  } else {
    model.value.studentStatus = undefined
    model.value.leaveDate = undefined
  }
}

const getError = () => {
  return isError.value
}

defineExpose({ getError })
</script>

<style scoped lang="scss">
:deep(.label-required) {
  color: var(--el-color-error) !important;
  background: var(--el-color-danger-light-9) !important;
}
</style>
